<!DOCTYPE html>
<html lang="zh-tw" dir="ltr">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
The dir attribute is used to set the base direction of text for display. dir屬性用於設置要顯示的文本的基本方向。
dir 這個屬性,在製作中英文網站時,其實不會特別標註,因為 html 最早都是應用於拉丁文上,而拉丁文的書寫方式主要是水平由左到右,而 dir 預設為 ltr ( left-to-right )也是由左到右,也因此不太常在 HTML 裡看到dir。
而跟 lang 一樣
<base>
,<frame>
,<frame>
,<hr>
,<iframe>
,<param>
和<script>
。那什麼時候會用到呢?
答案是網頁全部或部分用的是特殊語系,例如:阿拉伯文。(到目前為止也只遇過一次XD)
阿拉伯文的書寫方向是由右到左,因此在製作阿拉伯文的網站時,可以將全站的文本方向設定為<html dir="rtl">
( right-to-left )。
其實有一個非常方便可以知道語系書寫方向的線上工具,就是『Google 翻譯』,先在左邊設定中文,右邊的選擇為阿拉伯文,你會發現文字靠右了,但其實不是靠右,再看看 HTML,你會發現 div 上面有 dir 的設定dir="rtl"
(right-to-left)。
除了阿拉伯文,還有幾個文字是由右到左書寫,有興趣的人可以自己試著找看看。[2]
這時候會想說,那中文可不可以也這樣玩,答案是很抱歉,如果你針對一段中文字設定dir="rtl"
,效果會如同 text-align: right
一樣是文字靠右,但是書寫方向仍舊是由左到右。
那中文如果要從右到左書寫該怎麼辦呢?
在 Microsoft Internet Explorer 5.5 中,通過名為 writing-mode 的 CSS 屬性啟用對垂直配置的支持,這也是目前 CSS3 使用的垂直文字屬性。
是的!你沒看錯,這個屬性最早只有 IE 有支援!!
但是當時各個瀏覽器並不支援這個 CSS 屬性,一直到 CSS3 各瀏覽器才開始支援。
還沒有 CSS3 支援的時期,想要垂直文字怎麼辦?
那時候日本人開發了一支JS叫做『竹取JS』,那時候要製作垂直文字的畫面都靠這支JS。
有興趣的人也可以到他的Github去看如何使用。
各位看倌明天見囉~
參考資料:
[1] https://www.w3schools.com/tags/att_global_dir.asp
[2] https://www.w3.org/International/questions/qa-html-dir